<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/11
  Time: 11:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/echarts1.js"></script>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        #one {
            height: 45px;
            width: 1588px;
            background-color: #f2f2f2;
            position: relative;
            top: 15px;
            left: 30px;
        }

        #three {
            height: 45px;
            width: 1588px;
            background-color: #ffffff;
            position: relative;
            top: 40px;
            left: 30px;
        }
        #four{
            height: 45px;
            width: 1588px;
            background-color: #ffffff;
            position: relative;
            top: 45px;
            left: 30px;
        }

        #xian {
            position: relative;
            top: 30px;

        }

        #two1 {
            height: 100px;
            width: 510px;
            background-color: #f2f2f2;
            position: relative;
            top: 25px;
            left: 30px;
        }

        #two2 {
            height: 100px;
            width: 510px;
            background-color: #f2f2f2;
            position: relative;
            top: 25px;
            left: 55px;
        }

        #two3 {
            height: 100px;
            width: 510px;
            background-color: #f2f2f2;
            position: relative;
            top: 25px;
            left: 80px;
        }

        .circle-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            background-color: #f5c847;
        }

        #s1 {
            position: relative;
            color: #f8ae82;
            left: 310px;
            top: -30px;
            font-size: 40px;
        }

        #s2 {
            position: relative;
            left: 260px;
            color: #f8ae82;
        }

        #s3 {
            position: relative;
            color: #f8ae82;
            left: 310px;
            top: -30px;
            font-size: 40px;
        }

        #s4 {
            position: relative;
            left: 260px;
            color: #f8ae82;
        }

        #s5 {
            position: relative;
            color: #f8ae82;
            left: 310px;
            top: -30px;
            font-size: 40px;
        }

        #s6 {
            position: relative;
            left: 260px;
            color: #f8ae82;
        }


    </style>
</head>
<body>
<div id="app">
    <div style="background-color: #ffffff; width: 100%;height: 100%">
        <div>
            <table id="one">
                <tr>
                    <td style="background-color: #3a8ee6; width: 4px">&nbsp;</td>
                    <td>&nbsp;<i class="14px Base">&nbsp;{{head1}},&nbsp;欢迎使用后台管理系统,当前登录的店铺是&nbsp;&nbsp;<span
                            style="color: #398439;font-size: 20px;">{{head2}}</span></i></td>
                </tr>
            </table>
        </div>
        <div>
            <table id="two">
                <tr>
                    <td id="two1">&nbsp;&nbsp;<el-icon class="circle-icon bg-red" name="el-icon-house"></el-icon>
                        <span id="s1">{{branchcount}}</span><span id="s2">店铺总数</span>
                    </td>
                    <td id="two2">&nbsp;&nbsp;<el-icon class="circle-icon bg-red" name="el-icon-house"></el-icon>
                        <span id="s3">{{staffcount}}</span><span id="s4">员工总数</span>
                    </td>
                    <td id="two3">&nbsp;&nbsp;<el-icon class="circle-icon bg-red" name="el-icon-house"></el-icon>
                        <span id="s5">{{goodcount}}</span><span id="s6">商品总数</span>
                    </td>
                </tr>
            </table>
        </div>
        <div id="xian">
            <el-divider content-position="left"><span style="font-size: 20px">数据统计</span></el-divider>
        </div>
        <div>
            <table id="three">
                <tr>
                    <td style="background-color: #3a8ee6; width: 4px">&nbsp;</td>
                    <td>&nbsp;<span>商品售价统计</span></td>
                    <td>&nbsp;</td>
                    <td style="background-color: #3a8ee6; width: 4px">&nbsp;</td>
                    <td>&nbsp;<span>部门人员统计</span></td>
                    <td>&nbsp;</td>
                    <td style="background-color: #3a8ee6; width: 4px">&nbsp;</td>
                    <td>&nbsp;<span>商品库存统计</span></td>
                </tr>
            </table>
        </div>
        <div>
            <table id="four">
                <tr>
                    <td >
                        <div id="box1" style="width: 510px;height:400px;"></div>
                    </td>
                    <td>
                        <div id="box2" style="width: 510px;height:400px;"></div>
                    </td>
                    <td>
                        <div id="box3" style="width: 510px;height:400px;"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>


</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            head1: '',
            head2: '',
            //店铺总数
            branchcount: '',
            //员工总数
            staffcount: '',
            //商品总数
            goodcount: '',

        },
        created() {
            this.into();
            this.initCharts1();
            this.initCharts2();
            this.initCharts3();
        },
        methods: {
            into() {
                axios.post("/home/head1").then(function (resp) {
                    app.head1 = resp.data.data.staffname
                }),
                    axios.post("/home/head2").then(function (resp) {
                        app.head2 = resp.data.data.branchname
                    }),
                    axios.post("/home/branchcount").then(function (resp) {
                        app.branchcount = resp.data.data.branchcount
                    }),
                    axios.post("/home/staffcount").then(function (resp) {
                        app.staffcount = resp.data.data.staffcount
                    }),
                    axios.post("/home/goodcount").then(function (resp) {
                        app.goodcount = resp.data.data.goodcount
                    })
            },
            initCharts1() {
                axios.post("/home/goodprice").then(function (resp) {
                    var myChart = echarts.init(document.getElementById('box1'));
                    myChart.setOption({
                            title: {
                                text: 'Stacked Line'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['进价', '售价']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: resp.data.data[0]
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '进价',
                                    type: 'line',
                                    stack: 'Total',
                                    data: resp.data.data[1]
                                },
                                {
                                    name: '售价',
                                    type: 'line',
                                    stack: 'Total',
                                    data: resp.data.data[2]
                                }
                            ]
                        }
                    )
                })
            },
            initCharts2() {
                axios.post("/home/dept").then(function (resp) {
                    var myChart = echarts.init(document.getElementById('box2'));
                    myChart.setOption({
                        title: {
                            text: 'Referer of a Website',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data:
                                    resp.data.data
                                ,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            },
            initCharts3() {
                axios.post("/home/goods").then(function (resp) {
                    var myChart = echarts.init(document.getElementById('box3'));
                    myChart.setOption({
                        xAxis: {
                            type: 'category',
                            data: resp.data.data[0]
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data:  resp.data.data[1],
                                type: 'bar'
                            }
                        ]
                    })
                })
            }
        }
    })
</script>

</body>
</html>
